<template>
  <view>
    <view class="verificat-head">
      <view class="term">
        <input class="input-box" type="number" placeholder="请输入订单核验码" maxlength="12" v-model="verificationCode" autocomplete="off">
        <button @click="getVerificatOrder()" class="searchbtn">查询</button>
        <view class="wst-clear"></view>
      </view>
    </view>
    <view class="container"  v-if="orderInfo && 'goods' in orderInfo">
      <view class="stepContain">
        <view class="leftInfo">
          <view>
            订单编号：{{orderInfo.orderNo}}
          </view>
          <view>下单时间：{{orderInfo.createTime}}</view>
        </view>
        <view class="sattus">
          {{orderInfo.status}}
        </view>
      </view>
      <view class="concat">
        <view class="concatinfo">
          <view class="concatTitle">
            收货人信息
          </view>
          <view class="concater">
            用户:
            <text class="value-la">{{ orderInfo.userName }}</text>
          </view>
          <view class="concater">
            电话:
            <text class="value-la">{{ orderInfo.userPhone }}</text>
          </view>
          <view class="address">
            {{orderInfo.userAddress}}
          </view>
        </view>
      </view>
      <view class="goods">
        <view class="storeInfo">
          <view class="store">
            <uniIcon type="shop"></uniIcon>
            {{orderInfo.shopName}}
          </view>
          <!-- <view class="">
            {{orderInfo.}}
          </view> -->
        </view>
        <block v-if="'goods' in orderInfo && orderInfo.goods.length">

          <view class="goodsItem" v-for="(goodsItem,index) in orderInfo.goods" :key="index" @click="todetail(goodsItem.goodsId)">
            <image :src="goodsItem.goodsImg" class="goodPic" mode="aspectFill"></image>
            <view class="context">
              <view class="goodsName">
                {{goodsItem.goodsName}}
              </view>
              <view class="spec">
                <view class="price">
                  ￥{{goodsItem.goodsPrice}}
                </view>
                <view class="num">
                  x{{goodsItem.goodsNum}}
                </view>
              </view>
            </view>
          </view>

        </block>

        <view class="orderstatic">
          <view class="orderType">
            {{orderInfo.orderCodeTitle}}
          </view>
          <view class="totalBox">
            订单总价
            <text class="price">￥{{orderInfo.realTotalMoney}}</text>
          </view>
        </view>
      </view>
      <view class="spendBox">
        <view class="betwContainer">

          <view>
            <text>商品总额</text>
            <text>￥{{orderInfo.goodsMoney}}</text>
          </view>
        </view>
        <view class="payBox">
          实付款
          <text>￥{{orderInfo.realTotalMoney}}</text>
        </view>
      </view>
    </view>
    <empty v-else emptyText="无对应订单"></empty>

    <view class="write-off-btn" v-if="!verificationTime">
      <button class="button" type="button" @click="confirmWriteOff">确认核销</button>
    </view>
  </view>
</template>

<script>
import uniIcon from '@/components/uni-icons/uni-icons.vue'
import empty from "@/components/empty.vue"

export default {
  components: {
    uniIcon,
    empty
  },
  data() {
    return {
      orderId: 0,
      orderInfo: null,
      verificationCode: '', // 7111 1640 1793
      verificationTime: true,
    };
  },
  onLoad(options) {
  },

  methods: {
    changeVerificationCode(evl){
      let {detail:{value}} =evl;
      this.verificationCode = value.replace(/(.{4})/g, '$1 ')
    },
    todetail(id) {
      uni.navigateTo({
        url: '/pages/product/product?id=' + id
      })
    },
    // 查询核销订单
    getVerificatOrder(){
      this.orderInfo = []
      this.orderId = 0
      this.$Request.request('/api/orders/getVerificatOrder', 'POST', {
        verificationCode: this.verificationCode
      }).then(res => {
        if (res.status == 1) {
          this.orderId = res.data.orderId;
          this.orderInfo = res.data
          this.verificationTime = res.data.verificationTime ? true : false
          // this.loadDetail();
          return
        }
      }).catch(err => {
        console.log(err)
      })
    },
    // 确认核销
    confirmWriteOff(){
      this.$Request.request('/api/orders/orderVerificat', 'POST', {
        verificationCode: this.verificationCode
      }).then(res => {
        if (res.status == 1) {
          this.$api.msg(res.msg)
          this.verificationTime = true;
          // this.loadDetail();
          return
        }

      }).catch(err => {
        this.$api.msg(err.msg || err)
        console.log(err)
      })
    }
  },

}
</script>

<style lang="scss" scoped>
@import '../detail/detail.scss';

.verificat-head {
  margin-top: 10rpx;
  padding: 10rpx 12rpx;
  background: #fff;
}
.term{
  display: flex;
  justify-content: space-between;
  height: 90rpx;
  overflow: hidden;
  .searchbtn {
    align-self: center;
    float: right;
    background: rgba(238, 91, 37, 1);
    color: #FFFFFF;
    font-size: 28rpx;
    line-height: 90rpx;
    width: 120rpx;
    height: 90rpx;
    border-radius: 0px;


  }

  .input-box{
    align-self: center;
    height: 90rpx;
    width: calc(100% - 120rpx);
    background: #efecec;
    padding: 0px 20px;
    color: #6e6e6e;
  }
}


.write-off-btn{
  position: fixed;
  bottom: 20rpx;
  width: 100%;
  .button {

    width: 90%;
    margin-top: 5%;
    padding: 3px 0;
    flex: 1;
    background: rgba(238, 91, 37, 1);
    display: block;
    color: white;
    height: 92rpx;
    line-height: 80rpx;
  }
}

/deep/ .spendBox{
  padding-bottom: 120rpx!important;
}
</style>
